<template>
    <el-form ref="formRef" :model="formData" label-width="100px">
        <!-- 审核配置 -->
        <el-card shadow="never" class="!border-none">
            <div class="text-xl font-medium mb-[20px]">审核配置</div>
            <el-form-item label="审查通道" prop="channel">
                <div>
                    <el-radio-group v-model="formData.channel">
                        <el-radio value="baidu">百度审查</el-radio>
                        <el-radio value="aliyun">阿里审查</el-radio>
                    </el-radio-group>
                    <div class="form-tips">选择通道后: 请在下方对应渠道填写ApiKey相关配置。</div>
                </div>
            </el-form-item>
            <el-form-item label="AI问题审查" prop="review_question">
                <div>
                    <el-switch v-model="formData.review_question" />
                    <div class="form-tips">
                        检查用户输入的问题，校验通过再提交给AI进行答复。
                    </div>
                </div>
            </el-form-item>
            <el-form-item label="AI绘画审查" prop="review_draws">
                <div>
                    <el-switch v-model="formData.review_draws" />
                    <div class="form-tips">
                        检查输入的绘画描述词，校验通过再提交给AI进行绘画。
                    </div>
                </div>
            </el-form-item>
            <el-form-item label="AI视频审查" prop="review_video">
                <div>
                    <el-switch v-model="formData.review_video" />
                    <div class="form-tips">
                        检查输入的视频描述词，校验通过再提交给AI生成视频。
                    </div>
                </div>
            </el-form-item>
            <el-form-item label="AI音乐审查" prop="review_music">
                <div>
                    <el-switch v-model="formData.review_music" />
                    <div class="form-tips">
                        检查输入的视频描述词，校验通过再提交给AI生成音乐。
                    </div>
                </div>
            </el-form-item>
            <el-form-item label="用户信息审查" prop="review_users">
                <div>
                    <el-switch v-model="formData.review_users" />
                    <div class="form-tips">
                        检查用户的昵称和头像，违规则不允许进行创建或修改。
                    </div>
                </div>
            </el-form-item>
            <el-form-item label="其它输入审查" prop="review_texts">
                <div>
                    <el-switch v-model="formData.review_texts" />
                    <div class="form-tips">
                        检查用户端输入的内容，违规则不允许进行创建或修改
                    </div>
                </div>
            </el-form-item>
            <el-form-item label="上传图片审查" prop="review_image">
                <div>
                    <el-switch v-model="formData.review_image" />
                    <div class="form-tips">
                        检查用户端上传的图片，违规则不允许上传，仅检查少于4M的
                    </div>
                </div>
            </el-form-item>
        </el-card>

        <!-- 渠道配置 -->
        <el-card shadow="never" class="!border-none mt-4">
            <div class="text-xl font-medium mb-[20px]">渠道配置</div>
            <el-form-item label="存储方式：" prop="drive">
                <el-radio-group v-model="channel">
                    <el-radio value="baidu">百度审查</el-radio>
                    <el-radio value="aliyun">阿里审查</el-radio>
                </el-radio-group>
            </el-form-item>
            <div v-show="channel === 'baidu'">
                <el-form-item label="APPID" prop="baidu_app_id">
                    <div class="w-[380px]">
                        <el-input v-model="formData.baidu_app_id" maxlength="200" />
                    </div>
                </el-form-item>
                <el-form-item label="APIKey" prop="baidu_api_key">
                    <div class="w-[380px]">
                        <el-input v-model="formData.baidu_api_key" maxlength="200" />
                    </div>
                </el-form-item>
                <el-form-item label="SecretKey" prop="baidu_secret_key" >
                    <div class="w-[380px]">
                        <el-input v-model="formData.baidu_secret_key" maxlength="300" />
                        <div class="flex items-center">
                           <div class="form-tips">如果您尚未开通 (推荐): </div>
                            <el-button type="primary" link class="ml-1 mt-1">
                                <a
                                    href="https://ai.baidu.com/solution/censoring"
                                    target="_blank"
                                    rel="noopener noreferrer"
                                >
                                    前往开通
                                </a>
                            </el-button>
                        </div>
                    </div>
                </el-form-item>
            </div>
            <div v-show="channel === 'aliyun'">
                <el-form-item label="APIKey" prop="aliyun_api_key">
                    <div class="w-[380px]">
                        <el-input v-model="formData.aliyun_api_key" maxlength="200" />
                    </div>
                </el-form-item>
                <el-form-item label="SecretKey" prop="aliyun_secret_key" maxlength="300">
                    <div class="w-[380px]">
                        <el-input v-model="formData.aliyun_secret_key" maxlength="300" />
                        <div class="flex items-center">
                            <div class="form-tips">如果您尚未开通: </div>
                            <el-button type="primary" link class="ml-1 mt-1">
                                <a
                                    href="https://www.aliyun.com/product/lvwang"
                                    target="_blank"
                                    rel="noopener noreferrer"
                                >
                                    前往开通
                                </a>
                            </el-button>
                        </div>
                    </div>
                </el-form-item>
            </div>
        </el-card>

        <!-- 保存按钮 -->
        <el-card shadow="never" class="!border-none mt-4">
            <el-button
                v-perms="['setting:censor:save']"
                :loading="loading"
                type="primary"
                @click="handleSubmit"
            >保存配置</el-button>
        </el-card>
    </el-form>
</template>

<script setup lang="ts">
import type { FormInstance } from 'element-plus'
import feedback from '@/utils/feedback'
import censorApi from '@/api/setting/censor'

const channel = ref<string>('baidu')

const loading = ref(false)
const formRef = ref<FormInstance>()
const formData = reactive({
    channel: 'baidu',
    review_question: false,
    review_draws: false,
    review_video: false,
    review_music: false,
    review_users: false,
    review_texts: false,
    review_image: false,
    // 百度配置
    baidu_app_id: '',
    baidu_api_key: '',
    baidu_secret_key: '',
    // 阿里配置
    aliyun_api_key: '',
    aliyun_secret_key: ''
})

/**
 * 查询配置参数
 */
const queryConfigs = async (): Promise<void> => {
    const data = await censorApi.detail()
    Object.assign(formData, data)
    channel.value = formData.channel
}

/**
 * 提交修改参数
 */
const handleSubmit = async (): Promise<void> => {
    await formRef.value?.validate()

    loading.value = true
    await censorApi.save(formData)
        .finally(() => {
            setTimeout(() => {
                loading.value = false
            }, 500)
        })

    await queryConfigs()
    feedback.msgSuccess('保存成功')
}

onMounted(async () => {
    await queryConfigs()
})
</script>
